<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet">

    <script src="jquery.js"></script>
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class="container">
    <div class="dropdown" id="dropdown">
        <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">
            下拉菜单
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">家用电器</a>
            <a class="dropdown-item" href="#">电脑办公</a>
            <a class="dropdown-item" href="#">水果特产</a>
            <a class="dropdown-item" href="#">男装女装</a>
        </div>
    </div>
</body>
<script>
    $(function () {
        $("#dropdown").on("show.bs.dropdown", function () {
            $(this).children("[data-bs-toggle='dropdown']").html("开始显示下拉菜单")
        })
        $("#dropdown").on("shown.bs.dropdown", function () {
            $(this).children("[data-bs-toggle='dropdown']").html("下拉菜单显示完成")
        })
        $("#dropdown").on("hide.bs.dropdown", function () {
            $(this).children("[data-bs-toggle='dropdown']").html("开始隐藏下拉菜单")
        })
        $("#dropdown").on("hidden.bs.dropdown", function () {
            $(this).children("[data-bs-toggle='dropdown']").html("下拉菜单隐藏完成")
        })
    })
</script>


</html>